<template>
	<div class="TpCoupon">
		<yd-tab active-color="#fff">
			<yd-tab-panel>
				<div class="TpCoupon-btn" @click="setCoupon(0,'')">不使用优惠券</div>
				<div class="mytab mytab1">
					<div v-for="wsitem,key in wsCoupon" :key="key" class="Coupon-item" @click="setCoupon(wsitem.couponPrices,wsitem.couponId)">
						<div class="ci-bg"></div>
						<div class="ci-left">
							<p class="ci-title">{{wsitem.couponTitle}}</p>
							<p class="ci-time">使用期限{{wsitem.startTime}} - {{wsitem.endTime}}</p>
						</div>

						<div class="ci-right">
							￥<span>{{wsitem.couponPrices}}</span>
							<div class="ci-right-box">
							</div>
						</div>
					</div>
				</div>
			</yd-tab-panel>
		</yd-tab>
		<v-defect class="TpCoupon-defect" v-if="defect" :defectdata="defectdata"></v-defect>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import defect from "./defect";
	export default {
		name: "ChoiceCoupon",
		data() {
			return {
				defect: false,
				SessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")),
				defectdata: {
					msg: '暂无优惠券',
					type: "TpCoupon"
				},
				wsCoupon: [], //未使用
				ysCoupon: [], //已使用
				ygCoupon: [], //已过期
			}
		},
		computed: {
			...mapGetters([
				'source',
				
			])
		},
		mounted() {
			if(this.SessionUserinfo.length == 0) {
				this.$router.push({
					path: "/login"
				})
				if(this.wsCoupon.length != 0) {
					this.defect = false;
				}
			} else {
				this.CouponList()
			}
		},
		methods: {
			...mapActions({
				getSessionUserinfo: 'getSessionUserinfo',
				getCouponListInfo: 'getCouponListInfo',
				setAllPriceCoupon:'setAllPriceCoupon',
				setcouponId:'setcouponId'
			}),
			setCoupon(couponPrices,couponId){
				this.setAllPriceCoupon(couponPrices)
				this.setcouponId(couponId)
				this.$router.go(-1)
			},
			CouponList() {
				let ajaxSign = {
					source: this.source, // string 是 ios
					token: this.SessionUserinfo.token, // string 是 c4ddaf5b2475622f3de27906bce5d860
					//					payPrices: this.source, // string 否 在个人信息里面 不传payPrices
					//										type:2, // string 否 1 可以 2 不可以 3 过期
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetCouponList(ajaxData)
					.then(res => {
						let CouponListInfo = res.result;
						for(var i = 0; i < CouponListInfo.length; i++) {
							if(CouponListInfo[i].status == 1) {
								var endTime = new Date(CouponListInfo[i].endTime * 1000);
								if(endTime >= api.getLocalTime(8)) {
									this.wsCoupon = this.wsCoupon.concat(CouponListInfo[i])
								} else {
									this.ygCoupon = this.ygCoupon.concat(CouponListInfo[i])
								}
							}
							if(CouponListInfo[i].status == 0) {
								this.ysCoupon = this.ysCoupon.concat(CouponListInfo[i])
							}

							CouponListInfo[i].startTime = api.settiem(CouponListInfo[i].startTime);
							CouponListInfo[i].endTime = api.settiem(CouponListInfo[i].endTime);
						}
						this.getCouponListInfo(CouponListInfo)
					})
			},

		},
		components: {
			'v-defect': defect
		}
	}
</script>

<style>
	.TpCoupon .yd-tab-nav .yd-tab-active:before {
		width: 100%;
		left: 0;
		margin-left: 0;
	}
	
	.TpCoupon .yd-tab-nav-item:not(:last-child):after {
		height: 0;
	}
	
	.TpCoupon .yd-tab-nav:after {
		width: 0;
	}
	
	.TpCoupon .yd-tab-panel {
		background: #f5f5f5;
	}
	
	.TpCoupon .mytab {
		padding: .24rem;
		padding-top: 0;
		box-sizing: border-box;
	}
	
	.TpCoupon .Coupon-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		height: 1.54rem;
		padding-left: .2rem;
		box-sizing: border-box;
		background: url(../assets/img/images/Coupon-imgleft.png) no-repeat left;
		background-size: .05rem 100%;
		margin-bottom: .24rem;
		position: relative;
	}
	
	.TpCoupon .ci-title {
		font-size: .31rem;
		line-height: .31rem;
	}
	
	.TpCoupon .ci-time {
		font-size: .25rem;
		line-height: .25rem;
		margin-top: .27rem;
		color: #A4A4A4;
	}
	
	.TpCoupon .ci-bg {
		position: absolute;
		left: .04rem;
		top: 0;
		bottom: 0;
		background: #fff;
		height: 1.54rem;
		box-sizing: border-box;
		width: 80%;
		z-index: -2;
	}
	
	.TpCoupon .mytab .ci-right {
		height: 100%;
		color: #fff;
		padding: 0 .15rem 0 .11rem;
		box-sizing: border-box;
		position: relative;
	}
	
	.TpCoupon .mytab1 .ci-right {
		background: url(../assets/img/images/Coupon-imgright1.png) no-repeat right;
		background-size: .98rem 100%;
		background-position: 0 0 0 0;
	}
	
	.TpCoupon .mytab2 .ci-right {
		background: url(../assets/img/images/Coupon-imgright2.png) no-repeat right;
		background-size: .98rem 100%;
		background-position: 0 0 0 0;
	}
	
	.TpCoupon .ci-right-box {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0rem;
		box-sizing: border-box;
		z-index: -1;
	}
	
	.TpCoupon .mytab1 .ci-right-box {
		background: #E25051;
	}
	
	.TpCoupon .mytab2 .ci-right-box {
		background: #a4a4a4;
	}
	
	.TpCoupon .ci-right span {
		font-size: .8rem;
		line-height: 1.54rem;
		display: inline-block;
	}
	
	.TpCoupon-btn {
		width: 100%;
		margin: .15rem 0;
		text-align: center;
		line-height: .8rem;
		color: #E25051;
		font-size: .24rem;
		background: #fff;
	}
	
	.TpCoupon-defect {
		top: 4rem !important;
	}
</style>